<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字输入计算工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        accent: '#10B981',
                        neutral: '#F3F4F6',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .card-shadow {
                @apply shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20 transition-all duration-300;
            }
            .btn-hover {
                @apply hover:shadow-md hover:shadow-primary/30 transform hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 头部 -->
        <header class="text-center mb-8 animate-fade-in">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-indigo-600 mb-2">
                数字输入计算工具
            </h1>
            <p class="text-secondary text-lg max-w-2xl mx-auto">
                选择输入模式并计算总消耗值，支持四种不同的数字输入模式
            </p>
        </header>

        <!-- 主卡片 -->
        <main class="bg-white rounded-2xl card-shadow p-6 md:p-8">
            <!-- 模式选择 -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-sliders text-primary mr-2"></i>
                    选择输入模式
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button id="mode1" class="mode-btn bg-primary/10 text-primary border-2 border-primary rounded-lg p-4 flex items-center justify-between btn-hover">
                        <span class="font-medium">模式 1</span>
                        <span class="text-sm">(n, n1, n2, n3)</span>
                        <i class="fa fa-check-circle"></i>
                    </button>
                    <button id="mode2" class="mode-btn bg-white text-gray-600 border-2 border-gray-200 rounded-lg p-4 flex items-center justify-between btn-hover">
                        <span class="font-medium">模式 2</span>
                        <span class="text-sm">(n1, n2, n3)</span>
                        <i class="fa fa-circle-o"></i>
                    </button>
                    <button id="mode3" class="mode-btn bg-white text-gray-600 border-2 border-gray-200 rounded-lg p-4 flex items-center justify-between btn-hover">
                        <span class="font-medium">模式 3</span>
                        <span class="text-sm">(n, n1, n2)</span>
                        <i class="fa fa-circle-o"></i>
                    </button>
                    <button id="mode4" class="mode-btn bg-white text-gray-600 border-2 border-gray-200 rounded-lg p-4 flex items-center justify-between btn-hover">
                        <span class="font-medium">模式 4</span>
                        <span class="text-sm">(n1, n2)</span>
                        <i class="fa fa-circle-o"></i>
                    </button>
                </div>
            </div>

            <!-- 输入区域 -->
            <div id="input-section" class="mb-8 opacity-0 transition-opacity duration-300">
                <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-keyboard-o text-primary mr-2"></i>
                    输入数值
                </h2>

                <div id="inputs-container" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="input-group">
                        <label for="n" class="block text-sm font-medium text-gray-700 mb-1">n 值</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-calculator"></i>
                            </span>
                            <input type="number" id="n" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="输入 n 值">
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="n1" class="block text-sm font-medium text-gray-700 mb-1">n1 值</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-calculator"></i>
                            </span>
                            <input type="number" id="n1" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="输入 n1 值" required>
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="n2" class="block text-sm font-medium text-gray-700 mb-1">n2 值</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-calculator"></i>
                            </span>
                            <input type="number" id="n2" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="输入 n2 值" required>
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="n3" class="block text-sm font-medium text-gray-700 mb-1">n3 值</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-calculator"></i>
                            </span>
                            <input type="number" id="n3" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="输入 n3 值">
                        </div>
                    </div>
                </div>

                <!-- 计算结果区域 -->
                <div id="result-container" class="mt-6 bg-neutral rounded-lg p-4 opacity-0 transition-opacity duration-300">
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">计算结果</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="result-item">
                            <p class="text-sm text-gray-600">n 值</p>
                            <p id="result-n" class="text-lg font-semibold text-primary">-</p>
                        </div>
                        <div class="result-item">
                            <p class="text-sm text-gray-600">总消耗</p>
                            <p id="result-total" class="text-lg font-semibold text-accent">-</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 计算按钮 -->
            <div class="flex justify-center mt-8">
                <button id="calculate-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg flex items-center btn-hover opacity-50 cursor-not-allowed">
                    <i class="fa fa-calculator mr-2"></i>
                    计算总消耗
                </button>
            </div>
        </main>

        <!-- 公式说明卡片 -->
        <div class="mt-8 bg-white rounded-2xl card-shadow p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-book text-primary mr-2"></i>
                计算公式说明
            </h2>
            <div class="space-y-4">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-primary mb-2">总消耗计算公式</h3>
                    <p class="text-gray-700">n + (n1 - n)×2 + (n2 - n1)×2 + (n3 - n2)×4 = 总消耗</p>
                </div>
                <div class="bg-blue-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-primary mb-2">n 值获取规则</h3>
                    <p class="text-gray-700">1. 模式1或模式3：直接使用用户输入的n值</p>
                    <p class="text-gray-700">2. 模式2或模式4：根据n1计算n值</p>
                    <p class="text-gray-700 ml-4">- 如果n1 < 80，n = 2×n1 - 81</p>
                    <p class="text-gray-700 ml-4">- 如果上述计算结果为负数，则使用n = 2×n1 - 61</p>
                    <p class="text-gray-700 ml-4">- 确保n值大于0</p>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>© 2025 数字输入计算工具 | 设计与开发</p>
        </footer>
    </div>

    <script>
        // 当前选中的模式
        let currentMode = null;
        // 输入元素引用
        const nInput = document.getElementById('n');
        const n1Input = document.getElementById('n1');
        const n2Input = document.getElementById('n2');
        const n3Input = document.getElementById('n3');
        // 结果显示元素
        const resultN = document.getElementById('result-n');
        const resultTotal = document.getElementById('result-total');
        // 其他元素
        const inputSection = document.getElementById('input-section');
        const resultContainer = document.getElementById('result-container');
        const calculateBtn = document.getElementById('calculate-btn');

        // 模式按钮事件监听
        document.querySelectorAll('.mode-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                // 移除之前选中模式的样式
                document.querySelectorAll('.mode-btn').forEach(b => {
                    b.classList.remove('bg-primary/10', 'text-primary', 'border-primary');
                    b.classList.add('bg-white', 'text-gray-600', 'border-gray-200');
                    b.querySelector('i').classList.remove('fa-check-circle');
                    b.querySelector('i').classList.add('fa-circle-o');
                });

                // 设置当前选中模式的样式
                btn.classList.remove('bg-white', 'text-gray-600', 'border-gray-200');
                btn.classList.add('bg-primary/10', 'text-primary', 'border-primary');
                btn.querySelector('i').classList.remove('fa-circle-o');
                btn.querySelector('i').classList.add('fa-check-circle');

                // 更新当前模式
                currentMode = btn.id;

                // 显示输入区域
                inputSection.style.opacity = '1';

                // 根据模式显示/隐藏输入框
                updateInputFields();

                // 重置计算结果
                resetResults();

                // 启用计算按钮
                updateCalculateButton();
            });
        });

        // 输入框事件监听
        [nInput, n1Input, n2Input, n3Input].forEach(input => {
            input.addEventListener('input', updateCalculateButton);
        });

        // 计算按钮点击事件
        calculateBtn.addEventListener('click', calculateTotal);

        // 根据模式显示/隐藏输入框
        function updateInputFields() {
            // 先重置所有输入框状态
            resetAllInputFields();

            // 根据模式显示/隐藏特定输入框
            switch(currentMode) {
                case 'mode1':
                    // 显示所有输入框
                    nInput.disabled = false;
                    n1Input.required = true;
                    n2Input.required = true;
                    n3Input.required = true;
                    break;
                case 'mode2':
                    // 隐藏n输入框，显示其他三个
                    nInput.style.display = 'none';
                    nInput.disabled = true;
                    nInput.required = false;
                    n1Input.required = true;
                    n2Input.required = true;
                    n3Input.required = true;
                    break;
                case 'mode3':
                    // 显示n、n1、n2，隐藏n3
                    nInput.disabled = false;
                    nInput.required = true;
                    n1Input.required = true;
                    n2Input.required = true;
                    n3Input.style.display = 'none';
                    n3Input.disabled = true;
                    n3Input.required = false;
                    break;
                case 'mode4':
                    // 隐藏n、n3，显示n1、n2
                    nInput.style.display = 'none';
                    nInput.disabled = true;
                    nInput.required = false;
                    n1Input.required = true;
                    n2Input.required = true;
                    n3Input.style.display = 'none';
                    n3Input.disabled = true;
                    n3Input.required = false;
                    break;
            }
        }

        // 重置所有输入框状态
        function resetAllInputFields() {
            const inputGroups = document.querySelectorAll('.input-group');

            // 显示所有输入框
            inputGroups.forEach(group => {
                group.style.display = 'block';
            });

            // 重置所有输入框属性
            nInput.style.display = 'block';
            nInput.disabled = false;
            nInput.required = false;
            nInput.value = '';

            n1Input.disabled = false;
            n1Input.required = false;
            n1Input.value = '';

            n2Input.disabled = false;
            n2Input.required = false;
            n2Input.value = '';

            n3Input.style.display = 'block';
            n3Input.disabled = false;
            n3Input.required = false;
            n3Input.value = '';
        }

        // 更新计算按钮状态
        function updateCalculateButton() {
            if (!currentMode) {
                calculateBtn.classList.add('opacity-50', 'cursor-not-allowed');
                calculateBtn.classList.remove('opacity-100');
                return;
            }

            // 检查必填字段是否有值
            let isValid = true;

            if (nInput.required && !nInput.value) isValid = false;
            if (n1Input.required && !n1Input.value) isValid = false;
            if (n2Input.required && !n2Input.value) isValid = false;
            if (n3Input.required && !n3Input.value) isValid = false;

            if (isValid) {
                calculateBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                calculateBtn.classList.add('opacity-100');
            } else {
                calculateBtn.classList.add('opacity-50', 'cursor-not-allowed');
                calculateBtn.classList.remove('opacity-100');
            }
        }

        // 计算n值
        function calculateN() {
            const n1 = parseFloat(n1Input.value);

            // 模式1和模式3直接使用用户输入的n值
            if (currentMode === 'mode1' || currentMode === 'mode3') {
                return parseFloat(nInput.value);
            }

            // 模式2和模式4需要计算n值
            if (n1 < 80) {
                let n = 2 * n1 - 81;
                if (n <= 0) {
                    n = 2 * n1 - 61;
                }
                return n;
            } else {
                return n1;
            }
        }

        // 计算总消耗
        function calculateTotal() {
            if (!currentMode) return;

            // 获取输入值
            const n1 = parseFloat(n1Input.value);
            const n2 = parseFloat(n2Input.value);
            let n3 = null;

            // 根据模式获取n3值
            if (currentMode === 'mode1' || currentMode === 'mode2') {
                n3 = parseFloat(n3Input.value);
            }

            // 计算n值
            const n = calculateN();

            // 计算总消耗
            let total = n;

            // 添加(n1 - n)×2
            total += (n1 - n) * 2;

            // 添加(n2 - n1)×2
            total += (n2 - n1) * 2;

            // 如果有n3，添加(n3 - n2)×4
            if (n3 !== null) {
                total += (n3 - n2) * 4;
            }

            // 显示结果
            resultN.textContent = n.toFixed(2);
            resultTotal.textContent = total.toFixed(2);

            // 显示结果区域并添加动画
            resultContainer.style.opacity = '1';
            resultContainer.classList.add('animate-pulse');
            setTimeout(() => {
                resultContainer.classList.remove('animate-pulse');
            }, 1000);
        }

        // 重置计算结果
        function resetResults() {
            resultN.textContent = '-';
            resultTotal.textContent = '-';
            resultContainer.style.opacity = '0';
        }

        // 添加动画类
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .animate-fade-in {
                    animation: fadeIn 0.5s ease-out forwards;
                }
                .animate-pulse {
                    animation: pulse 1s ease-in-out;
                }
                @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.02); }
                    100% { transform: scale(1); }
                }
            </style>
        `);
    </script>
</body>
</html>
